/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-08-04 13:29:24
 * @LastEditTime : 2023-08-25 14:38:57
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Pages\Front\jtgj\Templates\OneOne.jsx
 * @Description  :
 */
import { sceneId } from '../Data'
import { CommonSmallTitle } from '../../Assets/Common/SmallTitle'
import { ProjectMap002 } from '../../Assets/Template/ProjectMap'
import { ProjectListTem, PieTemplate, PieCharts, AfterList } from '../Template'
import { Pie } from '@ant-design/plots'
import { ICON } from '../../../../Common/Configure/Icon'
import { useRequest, useEventEmitter, useLocalStorageState } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { useEffect, useState } from 'react'
import dayjs from 'dayjs'

const ColorOne = ['rgba(255, 228, 135, 1)', 'rgba(255, 165, 94, 1)']
const ColorTwo = ['rgba(109, 255, 209, 1)', 'rgba(59, 171, 233, 1)', 'rgba(182, 238, 255, 1)', 'rgba(229, 125, 221, 1)']

export const OneOne = () => {
    const [ClientData] = useLocalStorageState('ClientData')
    const [NavAc, setNavAc] = useState(1)

    const NavList = [
        { uuid: 1, label: '本年' },
        { uuid: 2, label: '本月' },
        { uuid: 3, label: '历年累计' },
    ]

    const ListOne = [
        { uuid: 2, label: '合同金额', value: '合同金额', unit: '万元', icon: 'zongtouzi' },
        { uuid: 3, label: '完成产值', value: '完成产值', unit: '万元', icon: 'IconAZuobiaoyoushujubeifen3' },
        { uuid: 4, label: '剩余产值', value: '剩余产值', unit: '万元', icon: 'IconAZuobiaoyoushujubeifen5' },
    ]

    const [DataOne, setDataOne] = useState()

    const ListTwo = [
        { uuid: 1, label: '收入', value: 'one', unit: '万元', color: 'rgba(144, 224, 255, 1)' },
        { uuid: 2, label: '成本', value: 'two', unit: '万元', color: 'rgba(255, 228, 135, 1)' },
        { uuid: 3, label: '利润', value: 'thr', unit: '万元', color: 'rgba(255, 165, 94, 1)' },
    ]
    const [DataTwo, setDataTwo] = useState()
    const [PieTwo, setPieTwo] = useState()

    const ListThr = [
        { uuid: 1, label: '在册员工', value: 'A01', color: 'rgba(109, 255, 209, 1)' },
        { uuid: 2, label: '劳务派遣', value: 'A02', color: 'rgba(59, 171, 233, 1)' },
        { uuid: 4, label: '临时工', value: 'A03', color: 'rgba(182, 238, 255, 1)' },
        { uuid: 3, label: '劳务作业', value: 'A04', color: 'rgba(229, 125, 221, 1)' },
    ]
    const [PieThr, setPieThr] = useState([])
    const [DataThr, setDataThr] = useState([])
    const [DataFou, setDataFou] = useState('')

    const { runAsync: getOne } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            setDataOne(res)
            setDataTwo({ one: res.本年收入, two: res.本年成本, thr: res.本年利润 })
            setPieTwo([
                { type: '成本支出', value: Number(res.本年成本) },
                { type: '利润', value: Number(res.本年利润) },
            ])
        },
    })

    const { runAsync: getTwo } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = {}
            let charts = []
            const uuidMapping = {
                '9144691c-a87d-40e5-9a33-946fb0bc4001': 'A01',
                '9144691c-a87d-40e5-9a33-946fb0bc4002': 'A02',
                '9144691c-a87d-40e5-9a33-946fb0bc4003': 'A03',
                '9144691c-a87d-40e5-9a33-946fb0bc4004': 'A04',
            }
            res.list.forEach(({ uuid, tableName, personCount }) => {
                const attribute = uuidMapping[uuid]
                if (attribute) {
                    data[attribute] = personCount
                    charts.push({ type: tableName, value: personCount })
                }
            })

            // setChartA01(charts)
            // setDataA01(data)

            setDataThr(data)
            setPieThr(charts)
        },
    })

    const { runAsync: getNumber } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { dictionary } = ClientData
            const typeList = dictionary['3b863e8d-4476-44e2-b487-96d0a948a080']
            const data = Object.keys(res)
                .filter(key => res[key] !== '0')
                .map(key => `${typeList[key]}(${res[key]})`)
                .join('、')
            setDataFou(data)
        },
    })

    const [Active, setActive] = useState()
    const ActiveEvent = useEventEmitter()
    ActiveEvent.useSubscription(val => {
        setNavAc(1)
        setActive(val)
        getName({ url: 'getOrganizationID', path: [val] })
    })

    useEffect(() => {
        if (Active) {
            getOne({ url: 'getJTGJGetProjectCostTwo', data: { organizationUuid: Active } })
            getTwo({ url: 'getGJPersonCategory', data: { organizationUuid: Active } })
            getNumber({ url: 'getEngineeringTypeCount', data: { organizationUuid: Active } })
        }
    }, [Active, getOne, getTwo, getNumber])

    const onClick = uuid => {
        if (uuid !== NavAc) {
            if (uuid === 2) {
                setDataTwo({ one: DataOne.本月收入, two: DataOne.本月成本, thr: DataOne.本月利润 })
                setPieTwo([
                    { type: '成本支出', value: Number(DataOne.本月成本) },
                    { type: '利润', value: Number(DataOne.本月利润) },
                ])
            }
            if (uuid === 1) {
                setDataTwo({ one: DataOne.本年收入, two: DataOne.本年成本, thr: DataOne.本年利润 })
                setPieTwo([
                    { type: '成本支出', value: Number(DataOne.本年成本) },
                    { type: '利润', value: Number(DataOne.本年利润) },
                ])
            }
            if (uuid === 3) {
                setDataTwo({ one: DataOne.历年收入, two: DataOne.历年成本, thr: DataOne.历年利润 })
                setPieTwo([
                    { type: '成本支出', value: Number(DataOne.历年成本) },
                    { type: '利润', value: Number(DataOne.历年利润) },
                ])
            }
            setNavAc(uuid)
        }
    }

    const [ProjectName, setProjectName] = useState('')

    const { runAsync: getName } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { tableName, customData } = res
            setProjectName(tableName)
            MapDataEvent.emit({ Active, customData })
        },
    })

    const MapDataEvent = useEventEmitter()

    return (
        <>
            <ProjectMap002 sceneId={sceneId} MapDataEvent={MapDataEvent} />
            <ProjectListTem type={1} ActiveEvent={ActiveEvent} />
            <div className="Right">
                <CommonSmallTitle title="概况" flex={508} style={{ marginBottom: 16 }}>
                    <div className="one">
                        <div>{ProjectName}</div>
                        <div>
                            <div>
                                {ListOne.map(({ uuid, icon, label, value, unit }) => (
                                    <div key={uuid}>
                                        {ICON[icon]}
                                        <div>
                                            <div>{label}</div>
                                            <div>
                                                {DataOne ? DataOne[value] : 0}
                                                {unit}
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                            <div>
                                <div>工程类型：</div>
                                <div> {DataFou} </div>
                            </div>
                        </div>
                        <div>
                            {NavList.map(({ uuid, label }) => (
                                <div
                                    key={uuid}
                                    className={uuid === NavAc ? 'active' : ''}
                                    onClick={() => onClick(uuid)}
                                >
                                    {label}
                                </div>
                            ))}
                        </div>
                        <div>
                            {PieTwo && (
                                <Pie
                                    {...PieTemplate({
                                        size: 160,
                                        data: PieTwo,
                                        color: ColorOne,
                                    })}
                                />
                            )}
                            <AfterList
                                list={ListTwo}
                                data={DataTwo}
                                style={{
                                    '--DivWidth': '100%',
                                    '--FirstSize': '22px',
                                    '--LastSize': '20px',
                                    '--AfterHight': '8px',
                                    '--AfterBtm': '4px',
                                }}
                            />
                        </div>
                    </div>
                </CommonSmallTitle>
                <CommonSmallTitle title="人员统计" flex={364}>
                    <div className="two">
                        <Pie
                            {...PieCharts({
                                size: 200,
                                title: '总人数',
                                data: PieThr,
                                color: ColorTwo,
                                statistic: {
                                    title: {
                                        fontSize: 44,
                                        fontFamily: 'Bahnschrift',
                                        fontWeight: 'bold',
                                        color: '#FFFFFF',
                                    },
                                    content: {
                                        fontSize: 20,
                                        fontFamily: 'MicrosoftYaHei',
                                        fontWeight: 'bold',
                                        color: '#5FE9FF',
                                    },
                                },
                            })}
                        />
                        <AfterList
                            list={ListThr}
                            data={DataThr}
                            style={{
                                '--DivWidth': '45%',
                                '--FirstSize': '22px',
                                '--LastSize': '20px',
                                '--AfterHight': '8px',
                                '--AfterBtm': '4px',
                            }}
                        />
                    </div>
                </CommonSmallTitle>
            </div>
        </>
    )
}
